<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #a {
            margin: 150px auto;
            width: 1500px;
            padding: 45px;
            text-align: center;
            background-color: #99FF99;
        }

        img{
            height: 70%;
        }
    </style>
</head>
<body>
<div id="a">
    <img src="image/img1.jpg" alt="雪糕"/>
    <br>
    <button type="button" id="btn1">上一张</button>
    <button type="button" id="btn2">下一张</button>
    <p id="b">共4张图片，当前第1张</p>
</div>


<script>
    window.onload=function(){
        const btn1 = document.getElementById("btn1");
        const btn2 = document.getElementById("btn2");
        const img = document.getElementsByTagName("img")[0];
        //构建一个数组存图片
        const imgArr = ["image/img1.jpg", "image/img2.jpg", "image/img3.jpg", "image/img4.jpg"];
        let index = 0;
        //console.log(src);
        const p = document.getElementById("b");

        btn1.onclick = function(){
            //alert("1");
            //img.src="img/2.jpg"
            index--;
            if (index<0){
                index = imgArr.length-1
            }
            img.src=imgArr[index]
            p.innerHTML = "共"+ imgArr.length+"张图片，当前第"+(index+1)+"张"
        };
        btn2.onclick = function(){
            //alert("2");
            index++;
            if (index>3){
                index = 0;
            }
            img.src=imgArr[index]
            p.innerHTML = "共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
        };
    };
</script>
</body>
</html>
